<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<!-- 此举只是单纯的将多个文件放入一个div中并将div中的元素以列的形式进行排列，
再将外面大的div以行的形式排列 -->
<script src = "./jswaterfll.js"></script>
    <title>瀑布流布局</title>
    <style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }

    #main{
        position: relative;
        display: flex;
    }
    .box{
        /*display: inline-block;*/
        padding: 15px 0px 0px 15px;
        /* float: left; */
    }
    .pic{
        padding: 10px;
        border-radius: 5px;
        border:1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
    }

    .pic img{
        width: 165px;
        height: auto;
    }
    .column{
      display: flex;
      flex-direction: column;
    }
    </style>
</head>
<body>
<div id = "main">
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/0.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/1.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/2.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/3.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/4.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/5.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/6.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/7.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/8.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/9.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/10.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/11.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/12.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/13.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/14.jpeg">
          </div>
      </div>
      <div class = "box">
          <div class = "pic">
              <img src = "images/15.jpeg">
          </div>
      </div>
    </div>
    <div class="column">
      <div class = "box">
          <div class = "pic">
              <img src = "images/16.jpeg">
          </div>
      </div>
    </div>
</div>
</body>
</html>
